<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../include/taglib.jsp" %>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" id="editPage">
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="form-panel">
            <h4 class="mb"><a href="javascript:jumpMenu('${ctx}/index/usual')"> 运营平台 </a><i
                    class="fa fa-angle-right"></i>
                <a href="javascript:jumpMenu('${ctx}/sysrole/page')"> 角色管理 </a>
            </h4>
        </div>
    </div>
</div>

<div class="row mt">
    <div class="col-md-12">
        <div class="form-panel">
            <div class="row">
                <div class="col-sm-2">
                    <h3>搜索</h3>
                    <div class="form-group">
                        <label for="input-select-node" class="sr-only">Search Tree:</label>
                        <input type="input" class="form-control" id="input-select-node" placeholder="Identify node..."
                               value="${keyWord}">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-success select-node" id="btn-select-node"> 搜索选中</button>
                        <button type="button" class="btn btn-danger select-node" id="btn-unselect-node"> 取消选中</button>
                    </div>
                </div>
                <div class="col-sm-3">
                    <h3>角色</h3>
                    <div id="treeview-selectable" class=""></div>
                </div>
                <div class="col-sm-6">
                    <h3>动作</h3>
                    <div id="selectable-output"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row list">
    <div class="col-md-12">
        <div class="content-panel" id="_list">

        </div><!-- /content-panel -->
    </div><!-- /col-md-12 -->
</div>
<script type="text/javascript">
    $(function () {
        var defaultData = "";
        var package = new AJAXPacket("${ctx}/sysrole/list")
        core.ajax.sendPacket(package, function (response) {
            if (response.data.success) {
                defaultData = response.data.resultMap.data;
            } else {
                alertMsg.error(response.data.errMsg);
            }
        }, false);
        package = null;

        var initSelectableTree = function () {
            return $('#treeview-selectable').treeview({
                data: defaultData,
                onNodeSelected: function (event, node) {
                    var package = new AJAXPacket("${ctx}/sysrole/edit");
                    package.data.add("id", node.id);
                    core.ajax.sendPacketHtml(package, function (data) {
                        $("#selectable-output").html(data);
                    });
                    package = null;
                    // $('#selectable-output').prepend('<p>' + node.id + ' was selected</p>');
                },
                onNodeUnselected: function (event, node) {
                    $('#selectable-output').empty();
                    // $('#selectable-output').prepend('<p>' + node.id + ' was unselected</p>');
                }
            });
        };
        var $selectableTree = initSelectableTree();

        var findSelectableNodes = function () {
            return $selectableTree.treeview('search', [$('#input-select-node').val(), {
                ignoreCase: false,
                exactMatch: false
            }]);
        };
        var selectableNodes = findSelectableNodes();

        // Select/unselect/toggle nodes
        $('#input-select-node').on('keyup', function (e) {
            selectableNodes = findSelectableNodes();
            $('.select-node').prop('disabled', !(selectableNodes.length >= 1));
        });

        $('#btn-select-node.select-node').on('click', function (e) {
            var selectable = false;
            selectableNodes = findSelectableNodes();
            if (selectableNodes.length >= 1) {
                selectable = !selectableNodes[0].selectable;
            }
            if (selectable == true) {
                $('#selectable-output').empty();
            }
            $selectableTree.treeview('selectNode', [selectableNodes, {silent: selectable}]);
        });

        $('#btn-unselect-node.select-node').on('click', function (e) {
            var selectable = true;
            selectableNodes = findSelectableNodes();
            if (selectableNodes.length >= 1) {
                selectable = !selectableNodes[0].selectable;
            }
            $selectableTree.treeview('unselectNode', [selectableNodes, {silent: selectable}]);
        });

        $("#btn-select-node").click();
    });

</script>